<template>
  <div id="app">
    <div id="nav">
      <div id="leftBox">Xmall</div>
      <div>
        <router-link to="/">首页</router-link>
        <router-link to="/all">全部</router-link>
      </div>
      <div id="rightBox">
        <!-- <router-link :to="item.path" :class="item.icon" :title="item.title" ></router-link> -->
        <router-link v-if="userId" to="/cart" class="el-icon-shopping-cart-2" title="购物车"></router-link>
        <router-link v-if="userId" to="/user" class="el-icon-user" title="用户中心"></router-link>
        <router-link v-if="isAdmin" to="/backstagehome" class="el-icon-monitor" title="后台系统"></router-link>
        <router-link v-if="!userId" to="/login" class="el-icon-user"></router-link>
        <a v-if="userId" class="el-icon-switch-button" @click="logOut()"></a>
        <!-- <router-link to="/register">注册</router-link> -->
        <!-- <span @click="login">登录</span> -->
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
name: "App",
  data() {
    return {
      userId: "",
      isAdmin:''
    };
  },
  created() {
    this.getRole();
    console.log(this.userId);
  },

  components: {},

  filters: {},

  computed: {},

  methods: {
    getRole(){
      this.userId = sessionStorage.getItem("userId");
      this.token = sessionStorage.getItem("token");
      this.axios.post('/api/getMenu',{
        Authorization:this.token
      }).then((res)=>{
        console.log(res.data);
          if (res.data.code === 200) {
            sessionStorage.setItem("isAdmin", true);
          }
      }).catch(error=>{
        console.log(error);
      })
    },
    logOut(){
      this.axios.get('/api/logout').then(res=>{
        console.log(res);
        this.userId = '';
        this.isAdmin = '';
        sessionStorage.setItem("token",'');
        sessionStorage.setItem("userId",'');
      }).catch(error=>{
        console.log(error);
      })
    }
  }
}
</script>

<style>
html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

#app {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#nav {
  position: fixed;
  z-index: 3;
  height: 60px;
  width: 100%;
  /* padding: 20px; */

  line-height: 60px;
  /* background-color: rgb(90, 90, 90); */
  background-color: #c86660;
  /* background-color: #132746;
  background-color: #0d1a2e; */
  background-color: #ff6666;
  background-color: #973444;

  user-select: none;
}
#nav a {
  padding-left: 28px;

  text-decoration: none;
  font-weight: bold;
  color: rgb(51, 51, 51);
  color: rgb(235, 235, 235);

}

#nav a.router-link-exact-active {
  /* color: #fcd00f; */
  /* color: #eca063; */
  color: #e9a05d;
  /* color: #8bc0e1; */
  /* color: #8c9f9c; */
  /* color: #887e75; */
}

#nav div {
  display: inline-block;

  color: white;
}

#leftBox {
  margin-left: 3%;
  margin-right: 10%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 900;
}
#rightBox {
  float: right;
  margin-right: 3%;
  padding-right: 14px;
  font-size: 24px;
}
</style>
